<template>
  <div>
    <el-form>
      <el-form-item label="咨询时间">
        　{{workTime}}
        <el-button type="primary" @click="open(1)" size="mini">修改</el-button>
      </el-form-item>
      <el-form-item label="客服qq">
        　{{qqNumber}}
        <el-button type="primary" @click="open(2)" size="mini">修改</el-button>
      </el-form-item>
      <el-form-item label="客服微信">
        　{{wxNumber}}
        <el-button type="primary" @click="open(3)" size="mini">修改</el-button>
      </el-form-item>
      <el-form-item label="vip按钮图片">
        <!--todo-->
        <img :src="vipPriceButton" />
        <el-button type="primary" @click="openModImage(1)" size="mini">修改</el-button>
      </el-form-item>
      <el-form-item label="快速升级客服二维码">
        <!--todo-->
        <img :src="wxImgSrc" style="width:100px;height: 100px;"/>
        <el-button type="primary" @click="openModImage(2)" size="mini">修改</el-button>
      </el-form-item>
      <el-form-item label="二维码下方描述文本">
        　{{contactText}}
        <el-button type="primary" @click="open(4)" size="mini">修改</el-button>
      </el-form-item>
    </el-form>
    <hr style="height: 1px;color: gray">
    <!--修改-->
    <el-dialog
      type="text"
      :modal-append-to-body="false"
      :visible.sync="modifyShow"
      width="50%"
      :title="title">
      <div>
        <el-input v-model="fieldValue"></el-input>
      </div>
      <div class="el-dialog__footer">
        <el-button type="primary" @click="submitModify">确认修改</el-button>
        <el-button @click="cancelModify">取消</el-button>
      </div>
    </el-dialog>
    <el-row>
      <label>猜你想问</label>
      <el-button type="primary" @click="openAdd" size="mini">添加</el-button>
    </el-row>
    <!--问答列表-->
    <el-table :data="askList" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column label="问题" prop="askTitle"></el-table-column>
      <el-table-column label="回答" prop="askAnswer"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="openModAsk(scope.row,scope.$index)">修改</el-button>
          <br>
          <el-button type="text" @click="openDel(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="删除" :modal-append-to-body="false" :visible.sync="delShow">
      <div>
        <p> 确认删除该条?</p>
      </div>
      <span class="el-dialog__footer">
         <el-button type="primary" @click="delAsk">确认</el-button>
          <el-button @click="delShow=false">取消</el-button>
      </span>
    </el-dialog>
    <!--修改问答-->
    <el-dialog
      type="text"
      :modal-append-to-body="false"
      :visible.sync="askShow"
      width="50%"
      title="猜你想问">
      <div>
        <label>问题</label>
        <el-input v-model="askObj.askTitle" resize="none" type="textarea"></el-input>
        <br>
        <label>回答</label>
        <el-input v-model="askObj.askAnswer" resize="none" type="textarea"></el-input>
      </div>
      <div class="el-dialog__footer">
        <el-button type="primary" @click="submitMod">确认修改</el-button>
        <el-button @click="askShow= false">取消</el-button>
      </div>
    </el-dialog>
    <!--添加问答-->
    <el-dialog
      type="text"
      :modal-append-to-body="false"
      :visible.sync="addAskShow"
      width="50%"
      title="猜你想问">
      <div>
        <label>问题</label>
        <el-input v-model="askObj.askTitle" resize="none" type="textarea"></el-input>
        <br>
        <label>回答</label>
        <el-input v-model="askObj.askAnswer" resize="none" type="textarea"></el-input>
      </div>
      <div class="el-dialog__footer">
        <el-button type="primary" @click="submitAdd">确认添加</el-button>
        <el-button @click="addAskShow=false">取消</el-button>
      </div>
    </el-dialog>
    <!--上传图片-->
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="imageShow" width="30%">
      <lazy-img-upload @onSuccess="imageSuccess"
                       beforeClass="afterUpload"
                       afterClass="afterUpload"
                       quality="50"
                       resize-width="750"
                       :background-img="imageUrl">
      </lazy-img-upload>
      <span slot="footer" class="dialog-footer">
         <el-button @click="imageShow = false">取 消</el-button>
         <el-button type="primary" @click="submitWxImage">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
  import {ajax, getContactInfo, modifyContact, modifyAskList} from "../../data/service";
  import LazyImgUpload from "../../components/LazyImgUpload"

  export default {
    name: "mallContact",
    data() {
      return {
        askList: [],
        contact: {//客服filedName
          qq: "imQQ",
          wx: "imWx",
          work: "worktime",
          wxImgSrc: "wxImgSrc",
          contactText: "upgradeDescription",
          vipPriceButton :"vipPriceButtonImage"
        },
        qqNumber: '',
        wxNumber: '',
        workTime: '',
        wxImgSrc: '',
        contactText: '',
        vipPriceButton:'',
        imageUrl: '',
        fieldName: '',
        fieldValue: '',
        modifyShow: false,
        imageShow: false,
        title: '',
        askShow: false,
        askObj: {
          askTitle: '',
          askAnswer: ''
        },
        choseIndex: 0,
        addAskShow: false,
        delShow: false
      }
    },
    mixins: [ajax],
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.doajax(getContactInfo, {}, resp => {
          this.askList = resp.askList;
          this.qqNumber = resp.imQQ;
          this.wxNumber = resp.imWx;
          this.workTime = resp.workTime;
          this.wxImgSrc = resp.wxImgSrc;
          this.contactText = resp.contactText;
          this.vipPriceButton = resp.vipPriceButtonImage;
        });
      },
      cancelModify() {
        this.fieldValue = '';
        this.fieldName = '';
        this.title = '';
        this.modifyShow = false;
      },
      //打开修改窗口
      open(val) {
        switch (val) {
          case 1:
            this.fieldValue = this.workTime;
            this.fieldName = this.contact.work;
            this.title = "修改咨询时间";
            break;
          case 2:
            this.fieldValue = this.qqNumber;
            this.fieldName = this.contact.qq;
            this.title = "修改客服qq";
            break;
          case 3:
            this.fieldValue = this.wxNumber;
            this.fieldName = this.contact.wx;
            this.title = "修改客服微信";
            break;
          case 4:
            this.fieldValue = this.contactText;
            this.fieldName = this.contact.contactText;
            this.title = "二维码下方描述文本";
            break;
        }
        this.modifyShow = true;
      },
      //提交修改
      submitModify() {
        this.doajax(modifyContact, {filedName: this.fieldName, value: this.fieldValue}, resp => {
          this.fieldValue = '';
          this.fieldName = '';
          this.loadData();
          this.modifyShow = false;
        });
      },
      openDel(index) {
        this.choseIndex = index;
        this.delShow = true;
      },
      //删除这一行
      delAsk() {
        this.askList.splice(this.choseIndex, 1);
        this.submitAsk();
        this.delShow = false;
        this.success("删除成功")
      },
      //打开修改问答窗口
      openModAsk(obj, index) {
        console.log("选中的" + index);
        this.initAskObj();
        this.askObj.askTitle = obj.askTitle;
        this.askObj.askAnswer = obj.askAnswer;
        this.choseIndex = index;//当前的选择的索引
        this.askShow = true;
      },
      openAdd() {
        this.initAskObj();
        this.addAskShow = true;
      },
      //初始化
      initAskObj() {
        this.askObj = {askTitle: '', askAnswer: ''}
      },
      submitAsk() {
        this.doajax(modifyAskList, {data: this.askList}, resp => {
          this.loadData();
        });
      },
      //提交修改
      submitMod() {
        if (!this.askObj.askAnswer || !this.askObj.askTitle) {
          this.error("请不要留空");
          return;
        }
        //当前索引下标，1条 ，替换为修改后的
        this.askList.splice(this.choseIndex, 1, this.askObj);
        this.submitAsk();
        this.askShow = false;
      },
      submitAdd() {
        if (!this.askObj.askAnswer || !this.askObj.askTitle) {
          this.error("请不要留空");
          return;
        }
        this.askList.push(this.askObj);
        this.submitAsk();
        this.addAskShow = false;
      },
      imageSuccess(val) {
        this.imageUrl = val;
      },
      openModImage(type) {
        switch (type) {
          case 1:
            this.imageUrl = this.vipPriceButton;
            this.fieldName = this.contact.vipPriceButton;
            break;
          case 2:
            this.imageUrl = this.wxImgSrc;
            this.fieldName = this.contact.wxImgSrc;
            break;
        }
        this.imageShow = true;
      },
      submitWxImage() {
        this.fieldValue = this.imageUrl;
        this.submitModify();
        this.imageShow = false;
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style scoped>

</style>
